<%@ include file="/WEB-INF/views/include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
	$(document).ready(function() {

		$("#formClient").validate({

			rules : {
				dni : {
					matchDni : true
				}

			},
			messages : {
				surname : {
					required : "<fmt:message key="generic.noSurname" />",
					minlength : "<fmt:message key="generic.tagTooShort" />",

				},
				name : {
					required : "<fmt:message key="generic.noName" />",
					minlength : "<fmt:message key="generic.tagTooShort" />",

				},
				dni : {
					required : "<fmt:message key="generic.noDni" />",
					minlength : "<fmt:message key="generic.tagTooShort" />",
					matchDni : "<fmt:message key="generic.invalidDni" />"

				}
			}
		});

	});

/* 	$('#formClient').submit(function() {

		alert('A');
		
		var thistarget = this.target;
		jQuery.ajax({
			data : $(this).serialize(),
			url : this.action,
			type : this.method,
            error: function() {
                $(thistarget).html("<span class = 'error'>Failed</spam>");
                alert('error');
            },
            success: function(results) {
                $(thistarget).html(results);
                alert('success');
            }
		});
		
		alert('B');

		return true;

	}); */

	$.fn.addItems = function(data) {
		return this.each(function() {
			var list = this;
			$.each(data, function(index, itemData) {
				/*var option = new Option(itemData, index);*/
				var option = new Option(itemData, index);

				list.add(option);
			});
		});
	};

	$(function() {
		//var clientNames = ${model.clientsNames};

		//var clientNames = jQuery.parseJSON('${model.clientsNames}');

		clientNamesId = jQuery.getJSON("getClientsIdNames.html",
				function(data) {
					/* $("#comboClientsList").autocomplete({
						source : data
					}); */
					$("#comboClients").addItems(" ");
					$("#comboClients").addItems(data);
				});

	});

	$("#comboClients").change(function() {

		if ($(this).val() == 0) {
			$("#formClient").find(':input').not(':submit').each(function() {
				$(this).val(" ");

			});
			$("#clientDni").removeAttr("readonly");
		} else {

			jQuery.getJSON("getClient.html", {
				dni : $(this).val()
			}, function(data) {
				$("#clientName").val(data.name);
				$("#clientSurname").val(data.surname);
				$("#clientDni").val(data.dni).attr('readonly', true);
				$("#clientDirection").val(data.direction);
				$("#clientCity").val(data.city);
				$("#clientProvince").val(data.province);
			});
		}

	});
</script>


</head>

<body>

	<div id="divClients">
		<%-- 		<c:forEach items="${model.arrClients}" var="client">
			<div id="newClient">
				<p>
					<c:out value="${client.name}" />
					<i><c:out value="${client.surname}" /></i>
				</p>
			</div>
		</c:forEach>  --%>
		<div class="divTable">
			<div class="divRow">
				<div class="divCellTag">
					<label for="comboClients">Clientes: </label>
				</div>
				<div class="divCell">
					<select id="comboClients" class="comboClients"></select>
				</div>
			</div>
			<!-- 			<div class="divRow">
				<div class="divCellTag">
					<label for="comboClientsList">Clientes: </label>
				</div>
				<div class="divCell">
					<input id="comboClientsList">
				</div>
			</div> -->
		</div>
	</div>
	<form id="formClient" method="POST" modelAttribute="newClient"
		action="clientForm.do">

		<div class="divTable">
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.name" />
				</div>
				<div class="divCell">
					<input id="clientName" name="name" type="text" class="required"
						minlength="2" />
				</div>
			</div>
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.surname" />
				</div>
				<div class="divCell">
					<input id="clientSurname" name="surname" type="text"
						class="required" minlength="2" />
				</div>
			</div>
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.dni" />
				</div>
				<div class="divCell">
					<input id="clientDni" name="dni" type="text" class="required"
						minlength="9" />
				</div>
			</div>
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.direction" />
				</div>
				<div class="divCell">
					<input id="clientDirection" name="direction" type="text"
						class="required" minlength="5" />
				</div>
			</div>
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.city" />
				</div>
				<div class="divCell">
					<input id="clientCity" name="city" type="text" class="required"
						minlength="2">
				</div>
			</div>
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.province" />
				</div>
				<div class="divCell">
					<input id="clientProvince" name="province" type="text"
						class="required" minlength="2" />
				</div>
			</div>

			<div class="divRow">
				<div class="divCell">
					<button type="submit" name="method" value="save">
						<fmt:message key="generic.save" />
					</button>
				</div>
			</div>
			<button type="submit" class="cancel" name="method" value="delete">
				<fmt:message key="generic.delete" />
			</button>
		</div>

		</div>
		</div>
	</form>

	<div id="display"></div>
	<div id="bas"></div>
	</div>
</body>
</html>